import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withConsumer } from '../context';
import styles from './index.module.scss';
import classNames from 'classnames';

import { update } from '@/utils/immutableUtil';
import Chat from './Chat';
import ChatInput from './ChatInput';
import Preview from './Preview';

@withConsumer
@connect(({ chat }) => ({
  openPreview: chat.openPreview,
  previewType: chat.previewType,
}))
class Comp extends Component {
  getWidth = (key) => {
    var maps = {
      e2b: { w: '30%', h: '70%' },
      iframe: { w: '30%', h: '70%' },
      ppt: { w: '45%', h: '55%' },
    };
    return maps[key];
  };
  shouldComponentUpdate = (np, ns) => update.call(this, np, ns);
  render() {
    const { openPreview, previewType } = this.props;

    var chatWidth = '100%';
    var previewWidth = 0;

    if (openPreview) {
      var item = this.getWidth(previewType);
      chatWidth = item.w;
      previewWidth = item.h;
    }

    return (
      <div
        className={classNames([
          styles.container,
          { [styles.openPreview]: openPreview },
        ])}
      >
        <div className={styles.chat} style={{ width: chatWidth }}>
          <div className={styles.chatCont}>
            <Chat />

            <div
              className={classNames(styles.chatInput, {
                [styles.max800]: !openPreview,
              })}
            >
              <ChatInput />
            </div>
          </div>
        </div>
        {openPreview && (
          <div className={styles.preview} style={{ width: previewWidth }}>
            <Preview />
          </div>
        )}
      </div>
    );
  }
}

export default Comp;
